<template>
<transition name="slide">
  <div class="add-song" v-show="showFlag" @click.stop>
    <div class="header">
      <h1 class="title">添加歌曲到列表</h1>
      <div class="close" @click="hide">
        <i class="icon-close"></i>
      </div>
    </div>
    <div class="search-box-wrapper">
      <search-box placeholder="搜索歌曲" @query="getQueryChange" ref="searchBox"></search-box>
    </div>
    <div class="shortcut" v-show="!query">
      <switches :switches="switches" :currentIndex="currentIndex" @selected="handleSelected"></switches>
      <scroll :data="playHistory" v-show="currentIndex === 0" class="playHistory-list" ref="playList">
          <song-list :songs="playHistory" @select="selectItem"></song-list>
      </scroll>
      <scroll :data="searchHistory" class="searchHistory-list" v-show="currentIndex === 1" ref="searchList">
          <search-list :searches="searchHistory" @deleteOne="deleteOne" @searchItem="addQuery"></search-list>
      </scroll>
    </div>
    <div class="search-result" v-show="query">
      <suggest :query="query" :showSinger="showSinger" @select="selectSuggest" @listScroll="blurInput"></suggest>
    </div>
    <top-tip ref="topTip">
      <div class="tip-title">
        <i class="icon-ok"></i>
        <span class="text">1首歌曲已经添加到播放列表</span>
      </div>
    </top-tip>
  </div>
</transition>
</template>
<script>
import SearchBox from 'base/search-box/search-box'
import Suggest from 'components/suggest/suggest'
import {searchMixin} from 'common/js/mixin'
import Switches from 'base/switches/switches'
import SongList from 'base/song-list/song-list'
import Scroll from 'base/scroll/scroll'
import {mapGetters, mapActions} from 'vuex'
import Song from 'common/js/songs'
import SearchList from 'base/search-list/search-list'
import TopTip from 'base/top-tip/top-tip'
export default {
  name: 'AddSong',
  mixins: [searchMixin],
  data () {
    return {
      showFlag: false,
      // query: '',
      showSinger: false,
      switches: [{name: '最近播放'}, {name: '搜索历史'}],
      currentIndex: 0
    }
  },
  computed: {
    ...mapGetters(['playHistory', 'searchHistory'])
  },
  methods: {
    deleteOne (item) {
      this.deleteSearchHistory(item)
    },
    selectItem (song, index) {
      this.insertSong(new Song(song))
      this.$refs.topTip.show()
    },
    handleSelected (index) {
      this.currentIndex = index
      setTimeout(() => {
        if (this.currentIndex === 0) {
          this.$refs.playList.refresh()
        } else {
          this.$refs.searchList.refresh()
        }
      }, 20)
    },
    selectSuggest () {
      this.saveHistory()
      this.$refs.topTip.show()
    },
    // addQuery (query) {
    //   this.query = query
    // },
    show () {
      this.showFlag = true
      setTimeout(() => {
        this.$refs.playList.refresh()
      }, 20)
    },
    hide () {
      this.showFlag = false
    },
    ...mapActions(['insertSong'])
  },
  components: {
    SearchBox,
    Suggest,
    Switches,
    SongList,
    Scroll,
    SearchList,
    TopTip
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
@import 'common/scss/mixin.scss';
.add-song{
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background: $color-background;
  z-index: 200;
  &.slide-enter-active, &.slide-leave-active{
    transition: all 0.3s;
  }
  &.slide-enter, &.slide-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .header{
    position: relative;
    height: 0.88rem;
    text-align: center;
    .title{
      line-height: 0.88rem;
      font-size: $font-size-large;
      color: $color-text;
    }
    .close{
      position: absolute;
      top: 0;
      right: 0.16rem;
      .icon-close{
        display: block;
        padding: 0.24rem;
        font-size: 0.4rem;
        color: $color-theme;
      }
    }
  }
  .search-box-wrapper{
    margin: 0.4rem;
  }
  .shortcut{
    .playHistory-list{
      position: absolute;
      top: 3.3rem;
      bottom: 0;
      width: 100%;
      overflow: hidden;
    }
    .searchHistory-list{
        padding: 0.4rem 0.6rem;
        position: absolute;
        top: 3.3rem;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
  }
  .search-result{
    position: fixed;
    top: 2.48rem;
    bottom: 0;
    width: 100%;
  }
  .tip-title{
    text-align: center;
    padding: 0.36rem 0;
    font-size: 0;
    .icon-ok{
      font-size: $font-size-medium;
      color: $color-theme;
      margin-right: 0.08rem;
    }
    .text{
      font-size: $font-size-medium;
      color: $color-text;
    }
  }
}
</style>
